<template>
	<view v-show="showPop" class="gift-box">
		<scroll-view style="height: 100%;" scroll-y>
			<view class="top-box">
				<view class="title">选择礼物</view>
				<view class="btn-box" @click="close">
					<u-icon name="close"></u-icon>
					<view class="text">取消</view>
				</view>
			</view>
			<view class="list-box">
				<view v-for="(item,index) in dataList" class="gift" @click="sendGift(item)">
					<view class="img-box">
						<img class="img" :src="item.img"></img>
						<view class="tag" v-if="item.giftType == 1">
							<text>特效</text>
							<text v-if="item.tag">·{{item.tag}}</text>
						</view>
						<view class="tag" v-if="item.giftType == 0 && item.tag">
							<text>{{item.tag}}</text>
						</view>
					</view>
					<view class="name">{{item.name}}</view>
					<view class="price">{{ fen2yuan(item.money) }} 钻石</view>
				</view>
			</view>
		</scroll-view>
		
	</view>
	
	<view class="svga-box" :class="giftFlag ? 'svga-show': 'svga-hide'">
		<c-svga ref="cSvgaRef" :canvasId='canvasId' :src="src" :loops='0' :auto-play="false" @frame='onFrame' @finished='onFinished' @percentage='onPercentage' @loaded='onLoaded'></c-svga>
		<view class="close-btn">
			<view class="bottom-box">
				<view class="title">{{gift.name}}</view>
				<view class="price">{{ fen2yuan(gift.money) }} 钻石</view>
				<view class="btn-box">
					<view class="btn" @click="cannel">取消</view>
					<view class="btn active" @click="ok">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import sheep from '@/sheep';
	export default {
		components: {
			
		},
		props: {
			modelValue: {
			  type: Object,
			  default: {}
			},
			showPop: {
			  type: Boolean,
			  default: false
			},
			dataList: {
			  type: Array,
			  default: []
			},
		},
		emits: ["close", "update:modelValue"],
		data() {
			return { 
				giftFlag: false,
				src: '',
				canvasId: 'myCanvas2',
				
				gift: {},
				
			}
		},
		methods: {
			close() {
				this.$emit('close');
			},
			sendGift(e) {
				this.gift = e;
				
				if(e.giftType == 0){
					// 普通礼物不播放
					this.close();
					this.$emit('update:modelValue', this.gift); 
					return;
				}
				
				this.src = e.pic;
				this.giftFlag = true;
			},
			onFinished() {
				this.giftFlag = false;
				console.log('动画停止播放时回调');
			},
			onFrame(frame) {//动画播放至某帧后回调
				// console.log(frame);
			},
			onPercentage(percentage) { //动画播放至某进度后回调
				// console.log(percentage);
			},
			onLoaded() {
				this.$refs.cSvgaRef.call('setContentMode', 'AspectFill');
				console.log('加载完成');
				this.$refs.cSvgaRef.call('startAnimation');
			},
			closeSvga() {
				this.src = "";
				this.$refs.cSvgaRef.call('stopAnimation');
				this.giftFlag = false;
			},
			fen2yuan(price) {
			  var f = 0;
			  var p = (price / 100.0).toFixed(0);
			  var p1 = (price / 100.0).toFixed(1);
			  var p2 = (price / 100.0).toFixed(2);
			  if(p*100 == price){
				f = 0;  
			  }else if(p1*100 == price){
				  f = 1;
			  }else if(p2*100 == price){
				  f = 2;
			  }
			  return (price / 100.0).toFixed(f)
			},
			cannel() {
				this.closeSvga();
			},
			ok() {
				this.closeSvga();
				this.close();
				this.$emit('update:modelValue', this.gift); 
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gift-box {
		background-color: #fff;
		position: absolute;
		top: 200rpx;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		padding: 15px;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		padding-bottom: 0;
		
		.top-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			left: 0;
			right: 0;
			background-color: #fff;
			top: 200rpx;
			padding: 0 15px;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			height: 110rpx;
			z-index: 1;
			
			.title {
				font-size: 28rpx;
			}
			
			.btn-box {
				background-color: var(--ui-BG-Main);
				padding: 7px 15px;
				font-size: 24rpx;
				border-radius: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				
				.text {
					margin-left: 5px;
				}
			}
		}
		
		.list-box {
			display: flex;
			flex-wrap: wrap;
			padding-top: 60rpx;
			
			.gift {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin: 20rpx 0px;
				
				.img-box {
					position: relative;
						
					.img{
						max-width: 160rpx;
						height: 160rpx;
					}
					
					.tag {
						position: absolute;
						top: 0;
						right: 0;
						font-size: 16rpx;
						color: #fff;
						background-color: var(--ui-BG-Main);
						border-radius: 40px;
						padding: 2rpx 8rpx;
					}
				}
				
				.name {
					font-size: 24rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					max-width: 160rpx;
					margin-top: 2px;
					margin-bottom: 7px;
				}
				
				.price {
					font-size: 20rpx;
					color: var(--ui-BG-Main);
				}
			}
		}
	}
	
	.svga-box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999999;
		width: 100%;
		height: 100%;
		background-color: black;
		
		.close-btn {
			color: #fff;
			position: absolute;
			z-index: 999999999;
			padding: 5px 10px;
			
			left: 0;
			right: 0;
			bottom: 100rpx;
			
			.bottom-box {
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				
				.title {
					font-size: 28rpx;
					margin-bottom: 5px;
				}
				
				.price {
					font-size: 24rpx;
				}
				
				.btn-box {
					display: flex;
					align-items: center;
					margin-top: 10px;
					
					.btn {
						border: 1px solid #fff;
						font-size: 28rpx;
						padding: 20rpx 110rpx;
						border-radius: 40px;
						margin: 15px;
						color: #fff;
					}
					
					.active {
						border: 1px solid var(--ui-BG-Main);
						background-color: var(--ui-BG-Main);
					}
				}
			}
		}
	}
	
	.svga-hide {
		/* #ifdef MP */
		transform: translate(-100%, 0);
		/* #endif */
		
		/* #ifndef MP */
		display: none;
		/* #endif */
	}
	
	.svga-show {
		/* #ifdef MP */
		transform: translate(0, 0);
		/* #endif */
		
		/* #ifndef MP */
		display: block;
		/* #endif */
	}
</style>